<template>
  <div>
    <div class="container">
      <el-row :gutter="20">
        <el-col :span="8">
          <el-card
            shadow="never"
            class="mgb20 rounded shadow"
            style="height:282px;"
          >
            <div class="user-info">
              <img
                src="../../../../static/img/avatar.jpg"
                class="user-avator"
                height="80"
                width="80"
              />
              <div class="user-info-cont">
                <div class="user-info-name">管理员</div>
                <div style="margin-top: 10px">欢迎来到智能会议室管理系统</div>
                <div style="margin-top: 10px">团队: the Hephaestus</div>
              </div>
            </div>
            <div class="user-info-list">
              上次登录时间：<span>{{ today }}</span>
            </div>
            <div class="user-info-list">上次登录地点：<span>湖南</span></div>
            <div class="user-info-list">总计登录次数：<span>120</span></div>
          </el-card>
          <el-card shadow="never" class="rounded shadow" style="height:252px;">
            <div slot="header" class="clearfix">
              <span>会议室使用情况</span>
            </div>
            <div class="mgb20">
              可用
              <el-progress
                :percentage="availableRoomPro"
                color="#1CC13DFF"
              ></el-progress>
            </div>
            <div class="mgb20">
              占用
              <el-progress
                :percentage="unavailableRoomPro"
                color="#f56c6c"
              ></el-progress>
            </div>
            <div class="mgb20">
              维修中
              <el-progress
                :percentage="mendRoomPro"
                color="#e6a23c"
              ></el-progress>
            </div>
          </el-card>
        </el-col>
        <el-col :span="16">
          <el-row
            class="mgb20 shadow rounded"
            style="margin-right: 2px;padding:10px; background-color: white"
          >
            <avue-data-box
              :option="option"
              style="margin-top: 5px"
            ></avue-data-box>

            <!--                <el-col :span="8">-->
            <!--                  <el-card :body-style="{padding: '0px'}">-->
            <!--                    <div class="grid-content grid-con-1">-->
            <!--                      <i class="icon gn-icon-huiyishi grid-con-icon"></i>-->
            <!--                      <div class="grid-cont-right">-->
            <!--                        <div class="grid-num">{{this.roomAmount}}</div>-->
            <!--                        <div>会议室数量</div>-->
            <!--                      </div>-->
            <!--                    </div>-->
            <!--                  </el-card>-->
            <!--                </el-col>-->
            <!--                <el-col :span="8">-->
            <!--                  <el-card :body-style="{padding: '0px'}">-->
            <!--                    <div class="grid-content grid-con-2">-->
            <!--                      <i class="icon gn-icon-bumen grid-con-icon"></i>-->
            <!--                      <div class="grid-cont-right">-->
            <!--                        <div class="grid-num">{{this.departmentAmount}}</div>-->
            <!--                        <div>部门数量</div>-->
            <!--                      </div>-->
            <!--                    </div>-->
            <!--                  </el-card>-->
            <!--                </el-col>-->
            <!--                <el-col :span="8">-->
            <!--                  <el-card :body-style="{padding: '0px'}">-->
            <!--                    <div class="grid-content grid-con-3">-->
            <!--                      <i class="icon gn-icon-huiyi grid-con-icon"></i>-->
            <!--                      <div class="grid-cont-right">-->
            <!--                        <div class="grid-num">{{this.recordAmount}}</div>-->
            <!--                        <div>会议记录</div>-->
            <!--                      </div>-->
            <!--                    </div>-->
            <!--                  </el-card>-->
            <!--                </el-col>-->
          </el-row>
          <el-card shadow="never" class="rounded shadow" style="height:403px;">
            <div slot="header" class="clearfix">
              <span>近期会议</span>
            </div>
            <el-table :data="recentMeeting" class="table">
              <el-table-column
                type="text"
                align="center"
                label="会议室名称"
                prop="roomName"
              ></el-table-column>
              <el-table-column
                type="text"
                align="center"
                label="会议主题"
                prop="topic"
              ></el-table-column>
              <el-table-column
                type="text"
                align="center"
                label="会议开始时间"
                prop="startTime"
              ></el-table-column>
              <el-table-column
                type="text"
                align="center"
                label="会议结束时间"
                prop="endTime"
              ></el-table-column>
              <el-table-column
                type="text"
                align="center"
                label="预定者"
                prop="reserveUid"
              >
              </el-table-column>
              <el-table-column
                type="text"
                align="center"
                label="预定者部门"
                prop="reserveDid"
              ></el-table-column>
            </el-table>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import Schart from "vue-schart";
export default {
  name: "BaseCharts",
  components: {
    Schart
  },
  data() {
    return {
      recentMeeting: [],
      roomAmount: 0,
      departmentAmount: 0,
      recordAmount: 0,
      availableRoomPro: 0,
      unavailableRoomPro: 0,
      mendRoomPro: 0,

      option: {
        span: 8,
        data: []
      }
    };
  },
  mounted() {
    this.getRecord();
    this.getRoomStatics();
    this.getDepartmentAmount();
  },
  computed: {
    today: function () {
      let today = new Date()

      // return 'aaaaaaaaaaaaaaaaaaa'
      return today.getFullYear() + '-' + (today.getMonth()+1) + '-' + today.getDate()
            + ' ' + today.getHours() + ':' + today.getMinutes()
    }
  },
  methods: {
    getRecord() {
      let form = {
        date: "",
        did: null,
        rid: null
      };
      const _this = this;
      axios.defaults.headers.common["Authorization"] = this.$store.state.token;
      const promoises = [];
      axios
        .post(
          "http://119.23.110.183:8080/getMeetingInfoByCondition?date=" +
            form.date +
            "&did=" +
            form.did +
            "&rid=" +
            form.rid
        )
        .then(res => {
          res = res.data;
          if (res.code === 0) {
            const list = res.data.list;
            for (let i = 0; i < list.length; i++) {
              list[i].startTime = list[i].startTime
                .substring(0, 16)
                .replace(/T/g, "\n");
              list[i].endTime = list[i].endTime
                .substring(0, 16)
                .replace(/T/g, "\n");
              list[i].topic = list[i].topic === null ? "默认" : list[i].topic;
              promoises.push(
                axios
                  .post(
                    "http://119.23.110.183:8080/getUserinfo?id=" +
                      list[i].reserveUid
                  )
                  .then(res => {
                    res = res.data;
                    if (res.code === 0) {
                      const userinfo = res.data.userinfo;
                      list[i].reserveUid = userinfo.name;
                      list[i].reserveDid = userinfo.departmentName;
                    }
                  })
              );
            }
            Promise.all(promoises).then(() => {
              _this.recentMeeting = list;
              _this.recordAmount = list.length;

              _this.option.data.push({
                title: "会议记录",
                count: list.length,
                icon: "el-icon-setting",
                color: "rgb(139,75,231)"
              })
            });
          }
        });
    },
    getRoomStatics() {
      const _this = this;
      let roomAmount = 0;
      let availableRoomAmount = 0;
      let unavailableRoomAmount = 0;
      let mendRoomAmount = 0;
      axios.defaults.headers.common["Authorization"] = this.$store.state.token;
      axios.get("http://119.23.110.183:8080/getMeetingRoomList").then(res => {
        res = res.data;
        if (res.code === 0) {
          const rooms = res.data.meetingRooms;
          roomAmount = rooms.length;
          for (let i = 0; i < rooms.length; i++) {
            if (rooms[i].available === true) {
              availableRoomAmount++;
            } else if (rooms[i].available === false) {
              unavailableRoomAmount++;
            } else if (rooms[i].available === null) {
              mendRoomAmount++;
            }
          }
          _this.availableRoomPro = parseFloat(
            ((availableRoomAmount / roomAmount) * 100).toFixed(1)
          );
          _this.unavailableRoomPro = parseFloat(
            ((unavailableRoomAmount / roomAmount) * 100).toFixed(1)
          );
          _this.mendRoomPro = parseFloat(
            ((mendRoomAmount / roomAmount) * 100).toFixed(1)
          );
          _this.roomAmount = roomAmount;


          _this.option.data.push({
            title: "会议室数量",
            count: roomAmount,
            icon: "el-icon-warning",
            color: "rgb(234,62,88)"
        })
        }
      });
    },
    getDepartmentAmount() {
      const _this = this;
      axios.defaults.headers.common["Authorization"] = this.$store.state.token;
      axios
        .get("http://119.23.110.183:8080/getDepartments", { oid: 5 })
        .then(res => {
          res = res.data;
          if (res.code === 0) {
            _this.departmentAmount = res.data.Departments.length;

            _this.option.data.push(
                // {
                //   title: "会议室数量",
                //   count: 1,
                //   icon: "el-icon-warning",
                //   color: "rgb(234,62,88)"
                // },
                {
                  title: "部门数量",
                  count: res.data.Departments.length,
                  icon: "el-icon-view",
                  color: "rgb(56, 161, 242)"
                }
                // {
                //   title: "会议记录",
                //   count: 10,
                //   icon: "el-icon-setting",
                //   color: "rgb(139,75,231)"
                // }

            )
          }
        });
    }
  }
};
</script>

<style scoped>
.container {
  padding-right: 20px;
  margin-left: 190px;
  margin-top: 85px;
}

.grid-con-1 .grid-con-icon {
  background: rgb(45, 140, 240);
}

.grid-con-1 .grid-num {
  color: rgb(45, 140, 240);
}

.grid-con-2 .grid-con-icon {
  background: rgb(100, 213, 114);
}

.grid-con-2 .grid-num {
  color: rgb(100, 213, 114);
}

.grid-con-3 .grid-con-icon {
  background: rgb(242, 94, 67);
}

.grid-con-3 .grid-num {
  color: rgb(242, 94, 67);
}

.user-info {
  display: flex;
  align-items: center;
  padding-bottom: 20px;
  border-bottom: 2px solid #ccc;
  margin-bottom: 20px;
}

.user-avator {
  width: 120px;
  height: 120px;
  border-radius: 50%;
}

.user-info-cont {
  padding-left: 50px;
  flex: 1;
  font-size: 14px;
  color: #999;
}

.user-info-cont div:first-child {
  font-size: 30px;
  color: #222;
}

.user-info-list {
  font-size: 14px;
  color: #999;
  line-height: 25px;
}

.user-info-list span {
  margin-left: 70px;
}

.mgb20 {
  margin-bottom: 20px;
}
.todo-item {
  font-size: 14px;
}
.schart {
  width: 100%;
  height: 300px;
}

.todo-item-del {
  text-decoration: line-through;
  color: #999;
}
</style>
